<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <title>高德地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=c49a1c12e1310e0242cee4ce97f00d88&plugin=AMap.ToolBar"></script>
</head>
<style>
    html,body,#container{
        height:100%;
    }
    .btn{
        position: fixed;
        bottom: 20px;
        right: 20px;
        background-color: white;
        width: 11rem
    }
    .btn_baidu{
        position: fixed;
        bottom: 50px;
        right: 20px;
        background-color: white;
        width: 11rem
    }
    .btn_gaode{
        position: fixed;
        bottom: 80px;
        right: 20px;
        background-color: white;
        width: 11rem
    }
    .shade{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 1000;
    }
    .bold{
        display: inline-block;
        width: 4px;
        height: 4px;
        background: #fff;
        border-radius: 50%;
        margin: 0 0.2rem;
    }
    .amap-zoomcontrol{
        display: none;
    }
</style>
<body>
<div id="container" ></div>
<input type='button' id='callApp' class="btn" style="height: 2.5rem;font-size: 1.2rem;" value='点击调起高德地图'/>

<!--<input type='button' id='tengxunApp' class="btn" value='点击腾讯导航'/>
<input type="button" id="baiduApp" class="btn btn_baidu" value="点击百度导航">
<input type="button" id="gaodeApp" class="btn btn_gaode" value="点击高德导航">-->
<div class="shade" style="display: flex;justify-content: center;align-items: center;">
    <div style="text-align: center">
        <img src="image/jiantou1.png" style="width: 80%;z-index: 1001">
        <p style="color: #fff;font-size: 1.2rem">
            请点击右上角(<span class="bold"></span><span class="bold"></span><span class="bold"></span>)处，并选择浏览器打开
        </p>
    </div>
</div>
</body>
</html>
<script src="./js/jquery-3.2.1.min.js"></script>
<script src="./js/commen.js?v=201812103"></script>
<script>

    var ua = navigator.userAgent.toLowerCase();
    if(ua.match(/MicroMessenger/i)=="micromessenger") {
        $('.shade').show();

    } else {
        $('.shade').hide();
    }


    var map = new AMap.Map("container");
    var currenAddress = getUrlParam('currenAddress');
    var endAddress = getUrlParam('endAdress');

    if(isEmpty(currenAddress)){
        map.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)

            function onComplete (data) {
                // data是具体的定位信息
                console.log(data);
                currenAddress = data.formattedAddress;
                initMap();
            }

            function onError (data) {
                console.log(data)
                // 定位出错
            }
        })
    }else {
        initMap();
    }

    function initMap() {
        AMap.plugin(["AMap.Driving"], function() {
            var drivingOption = {
                policy:AMap.DrivingPolicy.LEAST_TIME,
                map:map
            };
            var driving = new AMap.Driving(drivingOption); //构造驾车导航类
            //根据起终点坐标规划驾车路线
            driving.search([{keyword:currenAddress},{keyword:endAddress}], function(status, result){
                button.onclick = function(){
                    driving.searchOnAMAP({
                        origin:result.origin,
                        destination:result.destination
                    });
                }
            });

        });
        map.addControl(new AMap.ToolBar());
        var button = document.getElementById('callApp');
    }

    $('#tengxunApp').bind('click',function () {
        console.log('123')
        window.location.href= 'http://apis.map.qq.com/uri/v1/marker?marker=coord:30.595810,103.912830;title:渔虾跳主题餐吧;addr: 城南优品道广场星光广场一楼';
    })

    $('#baiduApp').bind('click',function () {
        window.location.href ='http://api.map.baidu.com/direction?origin=latlng:34.264642646862,108.95108518068|name:我家&destination=大雁塔&mode=driving&region=西安&output=html&src=webapp.baidu.openAPIdemo\n' +
            '//调起百度PC或Web地图，展示"西安市"从（lat:34.264642646862,lng:108.95108518068 ）"我家"到"大雁塔"的驾车路线。'
    })

    $('#gaodeApp').bind('click',function () {
        window.location.href ='https://uri.amap.com/navigation?from=116.478346,39.997361,startpoint&to=116.3246,39.966577,endpoint,midwaypoint&mode=car&policy=1&src=mypage&coordinate=gaode&callnative=0'
    })

</script>